/** Component: CustomDocCardWrapper */
@use './mixins' as *;

.custom-cards-wrapper {
  display: flex;
  flex-flow: row wrap;
  max-width: 640px;
  justify-content: space-between;

  .custom-doc-card {
    margin-bottom: 16px;
    flex: 0 0 312px;
    flex: 0 0 calc(50% - 10px);
  }

  article.custom-doc-card:first-of-type {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cardContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 136px;
  }

  .cardDescription {
    font-size: var(--strapi-font-size-sm);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    padding-top: 0;
  }
}

/** Component: CustomDocCard */
.custom-doc-card {
  .cardContainer {
    padding: 22px;
  }

  h2 {
    font-size: var(--strapi-font-size-md);
    padding-top: 0;
    color: var(--strapi-neutral-800);
  }

  &__icon {
    margin-right: 4px;
  }

  a {
    text-decoration: none;
  }

  a:hover {
    .cardTitle,
    .cardTitle i {
      color: var(--strapi-primary-600);
    }
  }

  .text--truncate.cardDescription {
    // cancel --truncate styles since we can't remove the' class
    overflow: auto;
    white-space: normal;
  }

  .cardDescription {
    color: var(--strapi-neutral-600);
  }

  .cardTitle {
    margin-bottom: 10px;
  }

  h2 {
    line-height: var(--strapi-line-height-sm);
  }

  i {
    font-size: var(--strapi-font-size-md);
    color: var(--strapi-neutral-500);
    position: relative;
    top: 1px;
  }
}

.custom-doc-card--small {
  margin-bottom: 16px;

  h2 {
    font-size: var(--strapi-font-size-md);
    line-height: var(--strapi-line-height-sm);
    margin-bottom: 0 !important;
  }
}

.custom-doc-card + p {
  margin-top: 16px
}

.markdown {
  p + .custom-doc-card,
  p + .custom-doc-card ~ .custom-doc-card {
    margin-bottom: 16px;
  }
}

@include small-down {
  .custom-doc-card {
    flex: 0 0 calc(100%) !important;
  }
}

@include dark {
  .custom-doc-card {
    .cardDescription {
      color: var(--strapi-neutral-400);
    }
  }
}
